<template>
  <div class="about-us">
    <MenuBar></MenuBar>
    <div class="main w">
      <div :class="pcOrWx?'titlePhoneNo':'title'" >
        <div class="left">
          关于康护
        </div>
        <ul class="right">
          <li>公司简介</li>
          <li>公司文化</li>
          <li>公司资质</li>
        </ul>
      </div>
      <div class="content">
        <div class="company-profile">
          <div class="caption tc">公司简介</div>
          <div class="details">武汉康护医疗科技有限公司(原：武汉雷软科技有限公司)成立于2012年4月，坐落在武汉光谷。公司由多名医疗净化行业的专业人士共同成立。是一家专业从事医院空间智慧护理系统、节能系统、手术室数字化系统等智能医疗领域研发的企业，也是中国首个提出手术一键护理管理的企业。现阶段，公司呈现良好的发展态势，已申请多项国家技术专利。我们以安全为核心，专业、严谨、专注为理念，人性化为纽带，创新为主轴，希望通过我们的不懈努力，提供更适合医疗单位使用的创新型医疗产品，使手术室等医疗空间朝数字化、自动化、智能化、人性化等方面发展，达到降低成本、提高效率、提升用户满意度的目的。 同时，我们还建立了完善的售后服务体系，为客户遇到的问题和困难提供快速的帮助。我们坚信，通过长期的努力，将为国民打造更安全、更舒适、更放心的医疗空间。</div>
        </div>
        <div class="company-culture">
          <Row>
            <i-col>
              <div class="caption tc">公司文化</div>
            </i-col>
            <i-col>
              <Row class-name="details" type="flex" justify="center">
                <i-col :xs="12" :md="6">
                  <div class="items" :class="pcOrWx ?'itemsPhone':''">
                    <img src="../assets/aboutUs/main_icon_brand.png" alt="">
                    <p class="subTitle">品牌</p>
                    <p class="subExplain">铸就精品、诚信天下、开放共赢</p>
                  </div>
                </i-col>
                <i-col :xs="12" :md="6">
                  <div class="items" :class="pcOrWx ?'itemsPhone':''">
                    <img src="../assets/aboutUs/main_icon_service.png" alt="">
                    <p class="subTitle">服务</p>
                    <p class="subExplain">真诚、专业、高效</p>
                  </div>
                </i-col>
                <i-col :xs="12" :md="6">
                  <div class="items" :class="pcOrWx ?'itemsPhone':''">
                    <img src="../assets/aboutUs/main_icon_concept.png" alt="">
                    <p class="subTitle">理念</p>
                    <p class="subExplain">以团队为基础、以客户为中心</p>
                    <p class="subExplain">敢于突破、勇于创新</p>
                  </div>
                </i-col>
                <i-col :xs="12" :md="6">
                  <div class="items" :class="pcOrWx ?'itemsPhone':''">
                    <img src="../assets/aboutUs/main_icon_vision.png" alt="">
                    <p class="subTitle">愿景</p>
                    <p class="subExplain">广交天下朋友</p>
                    <p class="subExplain">做中国完美手术室护理管理</p>
                  </div>
                </i-col>
              </Row>
            </i-col>
          </Row>

        </div>
        <div class="company-qualify">
          <div class="caption tc">公司资质</div>
          <div class="details" :class="pcOrWx?'detailsPhone':''">
            <Row type="flex" justify="space-around">
              <i-col><img src="../assets/aboutUs/main_pic_qualification_one.png" alt=""></i-col>
              <i-col><img src="../assets/aboutUs/main_pic_qualification_two.png" alt=""></i-col>
              <i-col><img src="../assets/aboutUs/main_pic_qualification_three.png" alt=""></i-col>
              <i-col><img src="../assets/aboutUs/main_pic_qualification_four.png" alt=""></i-col>

              <i-col><img src="../assets/aboutUs/main_pic_qualification_five.png" alt=""></i-col>
              <i-col><img src="../assets/aboutUs/main_pic_qualification_six.png" alt=""></i-col>
              <i-col><img src="../assets/aboutUs/main_pic_qualification_seven.png" alt=""></i-col>
              <i-col><img src="../assets/aboutUs/main_pic_qualification_eight.png" alt=""></i-col>

              <i-col><img src="../assets/aboutUs/main_pic_qualification_nine.png" alt=""></i-col>
              <i-col><img src="../assets/aboutUs/main_pic_qualification_ten.png" alt=""></i-col>
              <i-col><img src="../assets/aboutUs/main_pic_qualification_eleven.png" alt=""></i-col>
              <i-col><img src="../assets/aboutUs/main_pic_qualification_tweleve.png" alt=""></i-col>
            </Row>

          </div>
        </div>
      </div>
    </div>
    <Footers></Footers>
  </div>
</template>

<script>
  import MenuBar from '../components/menuBar'
  import Footers from '../components/footers'
  import {mapState, mapActions} from "vuex";

  export default {
    name: "about-us",
    components: {
      MenuBar: (resolve) => {
        require(['../components/menuBar'], resolve)
      },
      Footers: (resolve) => {
        require(['../components/footers'], resolve)
      },
    },
    computed:{
      ...mapState({
        activeName: (state) => state.ACTIVE_NAME,
        pcOrWx: (state) => state.config.PC_OR_WX,
      })
    },
    data(){
      return{}
    },
    methods:{
      ...mapActions(['setActiveName',]),
    },

    mounted(){
      this.setActiveName(this.$route.params.id);
    },
  }

</script>

<style scoped lang="less">
  .about-us{
    height: 100%;
    width: 100%;
    .main{
      background-color: #fff;
      .title{
        height: 80px;
        border-bottom: 1px solid #ccc;
        margin:0 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
          font-size: 18px;
          color: #4bb2df;
          padding-left: 36px;
        }
        .right{
          display: flex;
          li{
            padding-left: 50px;
            font-size: 12px;
            cursor: pointer;
          }
          li:before{
            content: '';
            display: inline-block;
            width: 4px;
            height: 4px;
            border-radius: 2px;
            background-color: #333;
            vertical-align: middle;
            margin-right: 5px;
          }
          li:hover,li:active{
            color:#4bb2df;
          }
          li:hover:before,li:active:before{
            background-color: #4bb2df;
          }
        }
      }
      .titlePhoneNo{
         display: none;
       }
      .content{
        .caption{
          height: 80px;
          font-size: 22px;
          line-height: 80px;
          color:#4bb2df;
        }
        .company-profile{
          min-height: 460px;
          background: url("../assets/aboutUs/main_pic.png") no-repeat center/100% 100%;
          .details{
            /*padding:0 38px;*/
            padding:0 3.3%;
            font-size: 18px;
            text-indent: 40px;
            line-height: 30px;
          }
        }
        .company-culture{
          .details{
            min-height: 200px;
            background-color: #4bb2df;
            padding-top: 16px;
            color:#fff;
            .items{
              text-align: center;
              padding-bottom: 16px;
              .subTitle{
                font-size: 18px;
              }
              .subExplain{
                line-height: 22px;
              }
            }
            .itemsPhone{
              img{
                width: 40px;
                height: 40px;
              }
              .subExplain{
                font-size: 12px;
              }
            }
          }
        }
        .company-qualify{
          .details{
            padding:0 1%;
            padding-bottom: 15px;
            img{
              display: block;
              margin-top: 6px;
            }
            /*img:nth-of-type(1),img:nth-of-type(2),img:nth-of-type(3),img:nth-of-type(4){*/
              /*margin-top: 0;*/
            /*}*/
          }
          .detailsPhone{
            img{
              width: 124px;
            }
          }
        }
      }
    }
  }


</style>
